<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'></i-form>
     <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
interface DataFormInterFace {
    age: string | undefined;
    address: string | undefined;
    city: string | undefined;
    checkBoxSelect:Array<any>
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                age: undefined,
                address: undefined,
                city: undefined,
                checkBoxSelect: []
            },
            fieldDataList: [
                {
                    type: 'select', // form表单类型
                    label: '年龄', // 字段描述信息
                    field: 'age', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '省份', // 字段描述信息
                    field: 'address', // form 对应字段
                    // 选择后回调: data :当前选中的value,fieldDataItem:当前项目form项
                    callback: (data: any, fieldDataItem:any) => {
                        alert(data)
                        dataForm.fieldDataList.forEach((item: FormDataInterFace) => {
                            if (item.field === 'city') {
                                item.dataList = [
                                    {
                                        label: '海淀区',
                                        value: 'haidianqu'
                                    },
                                    {
                                        label: '朝阳区',
                                        value: 'chaoyangqu'
                                    },
                                    {
                                        label: '石景山',
                                        value: 'shijingshan'
                                    },
                                    {
                                        label: '昌平区',
                                        value: 'changping'
                                    }
                                ]
                            }
                        })
                    },
                    dataList: [
                        {
                            label: '河南',
                            value: 'henan'
                        },
                        {
                            label: '郑州',
                            value: 'zhegnzhou'
                        },
                        {
                            label: '北京',
                            value: 'beijing'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择地址',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择城市',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'checkBoxSelect', // form表单类型
                    label: '下拉复选框', // 字段描述信息
                    field: 'checkBoxSelect', // form 对应字段
                    // 选择后回调: data :当前选中的对象,fieldDataItem:当前项目form项
                    callback: (data: any, fieldDataItem:any) => {
                        console.log(data, fieldDataItem)
                    },
                    dataList: [
                        {
                            value: 10948510534696991,
                            label: '角色管理'
                        },
                        {
                            value: 10948510534697001,
                            label: '菜单管理'
                        },
                        {
                            value: 10948510534697011,
                            label: '用户管理'
                        },
                        {
                            value: 10948510534697021,
                            label: '资源管理'
                        },
                        {
                            value: 10948510534697031,
                            label: '资源组管理'
                        }
                    ],
                    options: {
                        treeNodeFilterProp: 'label'
                    }
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        <i-form ref='myForm' :dataForm='dataForm'> </i-form> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                age: undefined,
                address: undefined,
                city: undefined,
                checkBoxSelect: []
            },
            fieldDataList: [
                {
                    type: 'select', // form表单类型
                    label: '年龄', // 字段描述信息
                    field: 'age', // form 对应字段
                    dataList: [
                        {
                            label: '21',
                            value: '21'
                        },
                        {
                            label: '20',
                            value: '20'
                        },
                        {
                            label: '19',
                            value: '19'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择年龄',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '省份', // 字段描述信息
                    field: 'address', // form 对应字段
                    // 选择后回调: data :当前选中的value,fieldDataItem:当前项目form项
                    callback: (data: any, fieldDataItem:any) => {
                        alert(data)
                        dataForm.fieldDataList.forEach((item: FormDataInterFace) => {
                            if (item.field === 'city') {
                                item.dataList = [
                                    {
                                        label: '海淀区',
                                        value: 'haidianqu'
                                    },
                                    {
                                        label: '朝阳区',
                                        value: 'chaoyangqu'
                                    },
                                    {
                                        label: '石景山',
                                        value: 'shijingshan'
                                    },
                                    {
                                        label: '昌平区',
                                        value: 'changping'
                                    }
                                ]
                            }
                        })
                    },
                    dataList: [
                        {
                            label: '河南',
                            value: 'henan'
                        },
                        {
                            label: '郑州',
                            value: 'zhegnzhou'
                        },
                        {
                            label: '北京',
                            value: 'beijing'
                        }
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择地址',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'select', // form表单类型
                    label: '城市', // 字段描述信息
                    field: 'city', // form 对应字段
                    dataList: [
                    ],
                    rules: [
                        {
                            required: true,
                            message: '请选择城市',
                            trigger: 'change'
                        }
                    ]
                },
                {
                    type: 'checkBoxSelect', // form表单类型
                    label: '下拉复选框', // 字段描述信息
                    field: 'checkBoxSelect', // form 对应字段
                    // 选择后回调: data :当前选中的对象,fieldDataItem:当前项目form项
                    callback: (data: any, fieldDataItem:any) => {
                        console.log(data, fieldDataItem)
                    },
                    dataList: [
                        {
                            value: 10948510534696991,
                            label: '角色管理'
                        },
                        {
                            value: 10948510534697001,
                            label: '菜单管理'
                        },
                        {
                            value: 10948510534697011,
                            label: '用户管理'
                        },
                        {
                            value: 10948510534697021,
                            label: '资源管理'
                        },
                        {
                            value: 10948510534697031,
                            label: '资源组管理'
                        }
                    ],
                    options: {
                         //配置搜索字段
                        treeNodeFilterProp: 'label'
                    }
                }
            ]
        }) `
                }

            ]
        }
        return {
            libDocData,
            myForm,
            dataForm
        }
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
